<template>
    <div class="customer">
        <row>
            <Col span="7">
                <div class="customer-icon" @click="customerShow">
                    <div class="customer-icon-img">
                    </div>
                </div>
            </Col>
            <Col span="16">
                <div class="customer-people" v-show="show">
                    <div class="customer-people-box">
                        <div>
                            <img class="customer-people-img" src="../../assets/images/1.png">
                        </div>
                        <div>
                            <img class="customer-people-img" src="../../assets/images/2.png">
                        </div>
<!--                        <div>-->
<!--                            <img class="customer-people-img" src="../../assets/images/3.jpg">-->
<!--                        </div>-->
                    </div>
                    <div class="customer-people-text">
                        <div>18698057201</div>
                        <div>16622515160</div>
                    </div>
                </div>
            </Col>
        </row>
    </div>
</template>

<script>
export default {
  name: 'customer',
  data () {
    return {
      show: false
    }
  },
  methods: {
    customerShow () {
      this.show = !this.show
    }
  }
}
</script>

<style scoped lang="less">
    .customer {
        position: absolute;
        right: 40px;
        bottom: 20px;

        &-icon {
            width: 80px;
            height: 80px;
            cursor: pointer;

            &-img {
                float: right;
                background-image: url(../../assets/images/kefu2.png);
                width: 60px;
                height: 195px;
            }

            &-img:hover {
                background-image: url(../../assets/images/kefu.png);
            }

            img {
                width: 100%;
            }
        }

        &-people {
            width: 200px;
            height: 300px;
            background: #f3f3f3;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 5px;

            &-img {
                width: 100%;
            }

            &-box {
                margin-top: 10px;
                width: 100px;
            }

            &-text {
                font-size: 16px;
            }
        }
    }
</style>
